<template>
  <div class="productOverview">
    <el-card style="width: 50%; height: 700px; margin: 20px">
      <div slot="header" class="clearfix">
        <span
          style="
            padding-left: 10px;
            border-left: 2px blue solid;
            font-size: 14px;
          "
          >今日概况</span
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="getProductData()"
          >刷新</el-button
        >
      </div>
      <div class="productCon">
        <div class="productConLf">
          <ul style="list-style-type: none">
            <li>
              <span></span>
              <span>统计</span>
              <span>比例</span>
            </li>
            <li>
              <span>全部号码</span>
              <span style="color: #0e72f4">{{ productData.allCount }}</span>
              <span style="color: #0e72f4"></span>
            </li>
            <li>
              <span>风险号码</span>
              <span style="color: #0e72f4">{{ productData.success }}</span>
              <span style="color: #0e72f4">{{
                ((productData.success / productData.allCount) * 100).toFixed(
                  2
                ) + "%"
              }}</span>
            </li>
            <li>
              <span>正常号码</span>
              <span style="color: #0e72f4">{{ productData.error }}</span>
              <span style="color: #0e72f4">{{
                ((productData.error / productData.allCount) * 100).toFixed(2) +
                "%"
              }}</span>
            </li>
            <li>
              <span>未知号码</span>
              <span style="color: #0e72f4">{{ productData.probability }}</span>
              <span style="color: #0e72f4">{{
                (
                  (productData.probability / productData.allCount) *
                  100
                ).toFixed(2) + "%"
              }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>
    <el-card style="margin: 20px">
      <div class="productBtm">
        <!-- 号码数据 -->
        <el-table :data="productData.data" stripe border style="width: 100%">
          <el-table-column prop="allCount" label="全部号码" align="center">
          </el-table-column>
          <el-table-column
            prop="successConsume"
            label="消费（元）"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="successCount" label="成功号码" align="center">
          </el-table-column>
          <el-table-column prop="username" label="操作人" align="center">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getProduct } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      productData: {},
    };
  },
  created() {
    this.getProductData();
  },
  methods: {
    getProductData: debounce(async function () {
      let res = await getProduct();
      if (res.code == 200) {
        this.$message({
          message: "查询成功",
          type: "success",
        });
        this.productData = res;
      }
      console.log(this.productData);
    }, 500),
  },
};
</script>

<style lang="scss" scoped>
.productOverview {
  .productCon {
    .productConLf {
      ul {
        li {
          font-size: 14px;
          margin-top: 20px;
          display: flex;
          span {
            display: inline-block;
            width: 50%;
            text-align: center;
          }
        }
      }
    }
  }
}
</style>
